/*
 * @Author: pengyong
 * @Date: 2021-03-20 21:55:08
 * @LastEditors: pengyong
 * @LastEditTime: 2021-03-22 20:58:31
 * @Description: ListItem
 * @FilePath: /supplier_app/components/ListItem/index.js
 */
import React, {Component} from 'react';
import {StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native';
import {Icon, Badge} from 'react-native-elements';
import Arrow from '../../assets/arrow_right.png';

export default function ListItem(props) {
  const {
    onPress,
    icon,
    iconStyle = {width: 22, height: 23},
    title,
    count,
    showBadge = true,
    style = {},
  } = props;
  return (
    <TouchableOpacity style={[styles.listItem, style]} onPress={onPress}>
      <Image source={icon} style={iconStyle} />
      <Text style={styles.listText}>{title}</Text>
      <View style={styles.listRight}>
        {showBadge && (
          <Badge
            value={count}
            badgeStyle={{paddingHorizontal: 5, backgroundColor: '#5196FD'}}
          />
        )}
        <Image style={styles.listArrow} source={Arrow} />
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  listItem: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 60,
    borderRadius: 4,
    backgroundColor: '#fff',
    marginBottom: 5,
    marginHorizontal: 12,
    paddingLeft: 15,
    position: 'relative',
    //以下是ios阴影属性：
    shadowRadius: 4,
    shadowOpacity: 0.8,
    shadowOffset: {width: 1, height: 3},
    shadowColor: 'rgba(0,0,0,0.1)',
    //注意：这一句是可以让安卓拥有灰色阴影
    elevation: 4,
  },
  listText: {
    fontSize: 15,
    color: '#000',
    marginLeft: 13,
  },
  listRight: {
    position: 'absolute',
    right: 13,
    top: 23,
    flexDirection: 'row',
    alignItems: 'center',
  },
  listArrow: {
    height: 15,
    width: 9,
    marginLeft: 13,
  },
});
